import React, { Component } from 'react'
import { Carousel } from 'antd-mobile';
import { observer, inject } from 'mobx-react'
import "./recommend.css"
@inject("recommend")
@observer

class Recommend extends Component<any,any> {
  componentDidMount() {
    this.props.recommend.getBanner()
    this.props.recommend.getrecommend()
    // console.log(this.props.recommend);
  }
  render() {
    const { Banner,recommend} = this.props.recommend
    console.log(Banner);
    
   
    return (
      <div className="recommend">


        <Carousel
          autoplay={true}infinite>
          {Banner.map((item: any, index: number) => (
             <a
             key={index}
             href="http://www.alipay.com"
             style={{ display: 'inline-block', width: '100%', height: '150px' }}
           >
            <img
              key={index}
              src={item.imageUrl}
              alt=""
              style={{ width: '100%', height: '150px', verticalAlign: 'top' }}
            />
              </a>
          ))}
        </Carousel>
        <h1 className="title">推荐歌单</h1>
        <div className="recommend-list">
              {
                recommend.map((item:any,index:number)=>{
                  return <dl key={index} onClick={()=>{this.datil(item.id)}}>
                        <dd >
                          <img  src={item.picUrl} alt=""/>
                        </dd>
                        <dt >
                          {item.name}
                        </dt>
                  </dl>
                })
              }
        </div>
      </div>


    )
  }
  datil(index:number) {
    console.log(index);
    console.log( this.props)
    this.props.history.push({
      pathname:`/datil/${index}`,
    })
    
  }
}
export default Recommend
